<template>
  <div :data-clazz="model.clazz">
    <div class="panelTitle">{{ i18n["userTask"] }}</div>
    <div class="panelBody">
      <DefaultDetail :model="model" :onChange="onChange" :readOnly="readOnly" />
      <!-- 默认页面/自定义页面 -->
       <div class="panelRow">
         <div>{{i18n['userTask.pageProperties']}}</div>
         <el-select
          style="width:90%; font-size: 12px"
          :placeholder="i18n['userTask.pageProperties.placeholder']"
          :value="model.isDefault"
          :disabled="readOnly"
          @change="
            (e) => {
              onChange('isDefault', e);
            }
          "
        >
          <el-option
            key="defaultPage"
            value="0"
            :label="i18n['userTask.defaultPage']"
          />
          <el-option
            key="personalPage"
            value="1"
            :label="i18n['userTask.personalPage']"
          />
        </el-select>
       </div>
      <!-- <div class="panelRow">
        <el-radio-group
          v-model="model.isDefault"
          @change="(value) => {
            onChange('isDefault', value);
          }"
        >
          <el-radio :label="0">{{ i18n["userTask.defaultPage"] }}</el-radio>
          <el-radio :label="1">{{ i18n["userTask.personalPage"] }}</el-radio>
        </el-radio-group>
      </div> -->
      <!-- 自定义URL -->
       <div v-if="model.isDefault==1" class="panelRow">
          <div>url：</div>
          <el-input
          style="width:90%; font-size:12px"
          :disabled="readOnly"
          :value="model.url"
          @input="
            (value) => {
              onChange('url', value);
            }
          "
        />
        </div>
        <!-- 事项表单 -->
        <div v-if="model.isDefault==0" class="panelRow">
          <el-checkbox
          @change="(value) => onChange('itemFormFlag', value)"
          :disabled="readOnly"
          :value="model.itemFormFlag"
          >{{ i18n["userTask.itemFormFlag"] }}</el-checkbox>
        </div>
        <!-- 只读/可编辑 -->
        <div v-if="model.isDefault==0&&model.itemFormFlag" class="panelRow">
          <el-radio-group
          v-model="model.readOnly"
          @change="(value) => onChange('readOnly', value)"
        >
          <el-radio :label="true">{{ i18n["userTask.readOnly"] }}</el-radio>
          <el-radio :label="false">{{ i18n["userTask.editor"] }}</el-radio>
        </el-radio-group>
        </div>
        <!-- 审批表单 -->
        <div v-if="model.isDefault==0" class="panelRow">
          <el-checkbox
          @change="(value) => onChange('flowFormFlag', value)"
          :disabled="readOnly"
          :value="model.flowFormFlag"
          >{{ i18n["userTask.flowFormFlag"] }}</el-checkbox>
        </div>
        <!-- 只读/可编辑 -->
        <div v-if="model.isDefault==0 && model.flowFormFlag" class="panelRow">
          <el-radio-group
          v-model="model.readOnlys"
          @change="(value) => onChange('readOnlys', value)"
        >
          <el-radio :label="true">{{ i18n["userTask.readOnly"] }}</el-radio>
          <el-radio :label="false">{{ i18n["userTask.editor"] }}</el-radio>
        </el-radio-group>
        </div>
        <!-- 功能选择 -->
         <div class="panelRow"  v-if="model.isDefault==0">
        <div>{{ i18n["userTask.funcSelect"] }}：</div>
        <el-select
          style="width:90%; font-size:12px"
          :placeholder="i18n['userTask.assignType.person.placeholder']"
          :disabled="readOnly"
          :value="model.funcId"
          :multiple="true"
          filterable
          @change="(e) => onChange('funcId', e)"
        >
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.name"
            :value="user.id"
          />
        </el-select>
      </div>
      <div class="panelRow">
        <div>{{ i18n["userTask.assignType"] }}：</div>
        <el-select
          style="width:90%; font-size: 12px"
          :placeholder="i18n['userTask.assignType.placeholder']"
          :value="model.assignType"
          :disabled="readOnly"
          @change="
            (e) => {
              onChange('assignValue', []);
              onChange('assignType', e);
            }
          "
        >
          <el-option
            key="person"
            value="person"
            :label="i18n['userTask.assignType.person']"
          />
          <el-option
            key="persongroup"
            value="persongroup"
            :label="i18n['userTask.assignType.persongroup']"
          />
          <el-option
            key="custom"
            value="custom"
            :label="i18n['userTask.assignType.custom']"
          />
        </el-select>
      </div>
      <div v-if="model.assignType === 'person'" class="panelRow">
        <div>{{ i18n["userTask.assignType.person.title"] }}：</div>
        <el-select
          style="width:90%; font-size:12px"
          :placeholder="i18n['userTask.assignType.person.placeholder']"
          :disabled="readOnly"
          :value="model.assignValue"
          :multiple="true"
          :filterable="true"
          :filter-method="
            (input, option) =>
              option.props.children
                .toLowerCase()
                .indexOf(input.toLowerCase()) >= 0
          "
          @change="(e) => onChange('assignValue', e)"
        >
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.name"
            :value="user.id"
          />
        </el-select>
      </div>
      <div v-else-if="model.assignType === 'persongroup'" class="panelRow">
        <div>{{ i18n["userTask.assignType.persongroup.title"] }}：</div>
        <el-select
          style="width:90%; font-size:12px"
          :placeholder="i18n['userTask.assignType.persongroup.placeholder']"
          :value="model.assignValue"
          :disabled="readOnly"
          :multiple="true"
          :filterable="true"
          :filter-method="
            (input, option) =>
              option.props.children
                .toLowerCase()
                .indexOf(input.toLowerCase()) >= 0
          "
          @change="(e) => onChange('assignValue', e)"
        >
          <el-option
            v-for="group in groups"
            :key="group.id"
            :label="group.name"
            :value="group.id"
          />
        </el-select>
      </div>
      <div v-else-if="model.assignType === 'custom'" class="panelRow">
        <div>{{ i18n["userTask.assignType.custom.title"] }}：</div>
        <el-input
          style="width:90%; font-size:12px"
          :value="model.javaClass"
          :disabled="readOnly"
          @input="(e) => onChange('javaClass', e.target.value)"
        />
      </div>
      <div class="panelRow">
        <div style="display:inline">{{ i18n["userTask.dueDate"] }}：</div>
        <el-date-picker
          type="datetime"
          style="width:90%; min-width:null"
          :placeholder="i18n['userTask.dueDate.placeholder']"
          :disabled="readOnly"
          :value="model.dueDate"
          value-format="yyyy-MM-dd HH:mm:ss"
          @input="(value) => onChange('dueDate', value)"
        />
      </div>
      <div class="panelRow">
        <div>{{i18n['userTask.dueTime']}}</div>
        <el-input
          :value="model.dueTime"
          style="width:90%; font-size:12px"
          :placeholder="i18n['userTask.dueTime.placeholder']"
          @input="
            (value) => {
              onChange('dueTime', value);
            }
          "
        ></el-input>
      </div>
      <div class="panelRow">
        <el-radio-group
          v-model="model.isSequential"
          @change="(value) => onChange('isSequential', value)"
        >
          <el-radio :label="1">{{ i18n["userTask.orSign"] }}</el-radio>
          <el-radio :label="2">{{ i18n["userTask.counterSign"] }}</el-radio>
        </el-radio-group>
        <el-input
          v-if="model.isSequential == 2"
          :value="model.signNum"
          style="width:90%; font-size:12px"
          placeholder="请输入限制个数"
          @input="
            (value) => {
              onChange('signNum', value);
            }
          "
        ></el-input>
        <!-- 会签 -->
        <!-- <el-checkbox
          @change="(value) => onChange('isSequential', value)"
          :disabled="readOnly"
          :value="model.isSequential"
          >{{ i18n["userTask.counterSign"] }}</el-checkbox
        > -->
        <!-- 或签 -->
        <!-- <el-checkbox
          @change="(value) => onChange('isSequential', value)"
          :disabled="readOnly"
          :value="model.isSequential"
          >{{ i18n["userTask.orSign"] }}</el-checkbox
        > -->
      </div>
    </div>
  </div>
</template>
<script>
import DefaultDetail from "./DefaultDetail";
export default {
  inject: ["i18n"],
  data() {
    return {};
  },
  components: {
    DefaultDetail,
  },
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
    users: {
      type: Array,
      default: () => [],
    },
    groups: {
      type: Array,
      default: () => [],
    },
    onChange: {
      type: Function,
      default: () => {},
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  mounted(){
    console.log(this.model)
  }
};
</script>
